<template>
	<el-form ref="menuFormRef" class="menu-info-form" :model="formModal" :rules="formRules" label-width="120px">
		<el-row class="mb20">
			<el-col :span="formConfig.col.span">
				<el-form-item label="菜单类型" prop="menuType">
					<el-radio-group v-model="formModal.menuType" button-style="solid" @change="menuTypeChange">
						<el-radio-button v-for="item in menuTypeOptions" :key="item.value" :label="item.value" :disabled="item.disabled">
							{{ item.label }}
						</el-radio-button>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="formConfig.col.span">
				<el-form-item label="菜单名称" prop="menuName">
					<el-input v-model="formModal.menuName" placeholder="请输入菜单名称" @blur="menuNameBlur" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row class="mb20">
			<el-col :span="formConfig.col.span">
				<el-form-item label="菜单编码" prop="menuCode">
					<el-input v-model="formModal.menuCode" placeholder="请输入菜单编码" />
				</el-form-item>
			</el-col>
			<el-col :span="formConfig.col.span">
				<el-form-item label="菜单别名" prop="menuAlias">
					<el-input v-model="formModal.menuAlias" placeholder="请输入菜单别名" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row class="mb20">
			<el-col :span="formConfig.col.span">
				<el-form-item label="菜单排序" prop="menuOrder">
					<el-input-number style="width: 100%" v-model="formModal.menuOrder" placeholder="请输入菜单排序" />
				</el-form-item>
			</el-col>
			<el-col :span="formConfig.col.span">
				<el-form-item label="权限标识" prop="permission">
					<el-input v-model="formModal.permission" placeholder="请输入权限标识" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row class="mb20">
			<el-col :span="formConfig.col.span">
				<el-form-item label="菜单状态" prop="status">
					<el-radio-group button-style="solid" v-model="formModal.status">
						<el-radio-button v-for="item in COMMON_STOP_OPEN_MT_ENUMS.options" :key="item.value" :label="item.value">
							{{ item.label }}
						</el-radio-button>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col v-if="!isButtonType" :span="formConfig.col.span">
				<el-form-item label="菜单图标" prop="icon">
					<IconSelector placeholder="请输入菜单图标" v-model="formModal.icon" />
				</el-form-item>
			</el-col>
		</el-row>
		<template v-if="!isButtonType">
			<el-row class="mb20">
				<el-col :span="formConfig.col.span">
					<el-form-item label="路由名称" prop="routerName">
						<el-input v-model="formModal.routerName" placeholder="请输入路由名称" @blur="routerNameBlur" />
					</el-form-item>
				</el-col>
				<el-col :span="formConfig.col.span">
					<el-form-item label="是否显示" prop="invisible">
						<el-radio-group button-style="solid" v-model="formModal.invisible">
							<el-radio-button v-for="item in invisibleOptions" :key="item.value" :label="item.value">
								{{ item.label }}
							</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="formConfig.col.span">
					<el-form-item label="路由地址" prop="routerPath">
						<el-input v-model="formModal.routerPath" placeholder="请输入路由地址" />
					</el-form-item>
				</el-col>
				<el-col :span="formConfig.col.span">
					<el-form-item label="重定向地址" prop="routerRedirect">
						<el-input v-model="formModal.routerRedirect" placeholder="请输入重定向地址" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="组件地址" prop="routerComponent">
						<el-input v-model="formModal.routerComponent" placeholder="请输入组件地址" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="外链地址" prop="routerLink">
						<el-input v-model="formModal.routerLink" placeholder="请输入外链地址" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="路由参数" prop="routerParams">
						<el-input v-model="formModal.routerParams" placeholder="请输入路由参数，示例：id=12&name=test" @blur="routerParamsBlur" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="请求地址" prop="routerParams">
						<el-input v-model="formModal.fullUrl" placeholder="请求地址" disabled readonly />
					</el-form-item>
				</el-col>
			</el-row>
		</template>
		<el-row class="mb20">
			<el-col :span="24">
				<el-form-item label="菜单备注" prop="remark">
					<el-input v-model="formModal.remark" placeholder="请输入菜单备注" type="textarea" :autoSize="{ minRows: 3, maxRows: 5 }" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script setup>
import { XEUtils, IsUtils } from '@/utils';
// import SvgIcon from "@/components/SvgIcon/index.vue"
// import IconSelect from "@/components/select/IconSelect/index.vue"
import { SvgIcon, IconSelector } from '@/components/icons';
import { COMMON_STOP_OPEN_MT_ENUMS } from '@/enums/enums-common';
import { MENU_TYPE_ENUMS, MENU_INVISIBLE_ENUMS, MENU_TYPE_CONS } from '@/enums/enums-menu.js';

// props
const props = defineProps({
	// 父节点
	parentNode: { type: Object },
	// 回显数据
	echoFormData: { type: Object },
});

// 是否为按钮类型
const isButtonType = computed(() => {
	return formModal.value.menuType === MENU_TYPE_CONS.BUTTON.value;
});
// ----- 菜单类型相关
const menuTypeOptions = reactive({
	0: { ...MENU_TYPE_ENUMS.options['0'], disabled: false },
	1: { ...MENU_TYPE_ENUMS.options['1'], disabled: false },
});
// ----- 是否显示相关
const invisibleOptions = ref([MENU_INVISIBLE_ENUMS.options['1'], MENU_INVISIBLE_ENUMS.options['0']]);

// ----- 表单操作相关
const btnFormModal = {
	// 菜单ID
	menuId: '',
	// 菜单类型 0-菜单 1-按钮
	menuType: 0,
	// 菜单编码
	menuCode: '',
	// 菜单名称
	menuName: '',
	// 菜单别名
	menuAlias: '',
	// 菜单排序
	menuOrder: 1,
	// 是否将作为菜单：0-隐藏 1-显示
	invisible: 1,
	// 权限标识
	permission: '',
	// 菜单备注
	remark: '',
	// 父级菜单
	parentId: '',
	// 菜单状态 1-启用 2-停用
	status: 1,
	// 菜单级次
	levelNo: 2,
	// 区划编码
	adCode: '',
};
const menuFormModal = {
	...btnFormModal,
	// 菜单URL
	url: '',
	// 菜单图标
	icon: '',
	// 路由访问地址
	routerPath: '',
	// 路由名称
	routerName: '',
	// 路由外链地址
	routerLink: '',
	// 路由重定向地址
	routerRedirect: '',
	// 路由组件地址
	routerComponent: '',
	// iframe加载地址
	iframeSrc: '',
	// 路由额外参数
	routerParams: '',
	// 全路径
	fullUrl: '',
};
const formModal = ref(XEUtils.clone(menuFormModal), true);
const formRules = ref({
	menuCode: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
	menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
	routerName: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
	routerPath: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
	routerComponent: [{ required: true, message: '请输入组件地址', trigger: 'blur' }],
});
const formConfig = reactive({
	col: { lg: 12, md: 12, sm: 24, span: 12 },
});
/** 加载表单数据 */
const loadForm = () => {
	let newForm = {};
	Reflect.ownKeys(formModal.value).forEach((key) => {
		const echoFormValue = props.echoFormData[key];
		let value = IsUtils.isNotEmpty(echoFormValue) ? echoFormValue : formModal.value[key];
		if (key === 'icon') {
			newForm[key] = XEUtils.clone(`rk-${value}`, true);
		} else {
			newForm[key] = XEUtils.clone(value, true);
		}
	});
	formModal.value = newForm;
	setMenuSomeInfo();
	setMenuTypeInfo();
};
const setMenuSomeInfo = () => {
	const { parentNode, echoFormData: echoForm } = props;
	if (!formModal.value.menuId) {
		const parentCode = parentNode.menuCode;
		const { menuCount, buttonCount } = echoForm;
		let resultCode = '';
		let menuOrder = echoForm.menuOrder;
		if (formModal.value.menuType === 0) {
			// resultCode = `${Number(parentCode)  + menuCount + 1}000`
			resultCode = `${parentCode}000`;
			resultCode = `${Number(resultCode) + menuCount + 1}`;
			menuOrder = menuCount + 1;
		} else {
			resultCode = `${Number(parentCode) + buttonCount + 1}`;
			menuOrder = buttonCount + 1;
		}
		formModal.value.menuCode = resultCode;
		formModal.value.menuOrder = menuOrder;
	}
};
const setMenuTypeInfo = () => {
	const { echoFormData: echoForm } = props;
	// const { menuType } = echoForm
	if (echoForm.menuId) {
		// if (menuType === MENU_TYPE_CONS.MENU.code) {
		//   menuTypeOptions[MENU_TYPE_CONS.MENU.code].disabled = false
		//   menuTypeOptions[MENU_TYPE_CONS.BUTTON.code].disabled = true
		// }
		// if (menuType === MENU_TYPE_CONS.BUTTON.code) {
		//   menuTypeOptions[MENU_TYPE.MENU.code].disabled = true
		//   menuTypeOptions[MENU_TYPE_CONS.BUTTON.code].disabled = false
		// }
	} else {
		if (echoForm.menuCount != 0) {
			menuTypeOptions[MENU_TYPE_CONS.MENU.value].disabled = false;
			menuTypeOptions[MENU_TYPE_CONS.BUTTON.value].disabled = true;
		} else {
			menuTypeOptions[MENU_TYPE_CONS.MENU.value].disabled = false;
			menuTypeOptions[MENU_TYPE_CONS.BUTTON.value].disabled = false;
		}
	}
};

/** 菜单类型发生变化 */
const menuTypeChange = () => {
	const { parentNode, echoFormData: echoForm } = props;
	const { menuType, routerName } = formModal.value;
	if (menuType === MENU_TYPE_CONS.BUTTON.value) {
		if (echoForm.permission) {
			formModal.value.permission = echoForm.permission;
		} else {
			formModal.value.permission = `${parentNode.routerName}:`;
		}
	} else {
		if (echoForm.permission) {
			formModal.value.permission = echoForm.permission;
		} else {
			formModal.value.permission = routerName;
		}
	}
	// setMenuSomeInfo()
};
/** 路由名称发生变化 */
const routerNameBlur = () => {
	const { routerName, routerParams, menuType } = formModal.value;
	const { parentNode } = props;
	// formModal.value.permission = parentNode.routerName ? `${parentNode.routerName}:${routerName}` : routerName
	let permission = routerName;
	if (menuType === MENU_TYPE_CONS.MENU.value) {
		permission = `${permission}:list`;
	}
	formModal.value.permission = permission;
	formModal.value.routerPath = routerName;
	formModal.value.routerAlias = routerName;
	let baseFullUrl = `${parentNode.extraInfo.nextFullUrl || ''}/${routerName}`;
	formModal.value.fullUrl = routerParams ? `${baseFullUrl}?${routerParams}` : baseFullUrl;
};
const menuNameBlur = () => {
	const { menuName } = formModal.value;
	formModal.value.menuAlias = menuName;
};
/** 路由参数发生变化 */
const routerParamsBlur = () => {
	const { routerParams, fullUrl } = formModal.value;
	if (routerParams) {
		let fullUrls = fullUrl.split('?');
		formModal.value.fullUrl = `${fullUrls[0]}?${routerParams}`;
	} else {
		let fullUrls = fullUrl.split('?');
		formModal.value.fullUrl = `${fullUrls[0]}`;
	}
};

// ----- 路由参数相关
const paramsColumns = ref([
	{
		field: 'paramKey',
		title: '参数名',
		align: 'left',
		editRender: {},
		slots: { edit: 'param_input' },
		formatter: ({ cellValue }) => {
			return cellValue || '-';
		},
	},
	{
		field: 'paramValue',
		title: '参数值',
		align: 'left',
		editRender: {},
		slots: { edit: 'param_input' },
		formatter: ({ cellValue }) => {
			return cellValue || '-';
		},
	},
]);

// 表单的模板引用对象
const menuFormRef = ref();
/** 获取表单数据 */
const getFormData = () => {
	let resultData = XEUtils.clone(toRaw(formModal.value), true);
	const iconValue = resultData['icon'];
	resultData['icon'] = iconValue ? iconValue.replace('rk-', '') : iconValue;
	return resultData;
};
/** 校验表单信息 */
const validateForm = () => {
	return new Promise((resolve) => {
		menuFormRef.value.validate((valid, invalidFields) => {
			resolve(valid);
		});
	});
};

loadForm();

defineExpose({
	getFormData,
	validateForm,
});
</script>

<style lang="scss" scoped>
.menu-info-form {
	padding-right: 50px;
}
</style>
